<template>
	<view class="page bg-white">
		<view class="main">
			<u-text color="#333" size="32rpx" text="修改出生日期" bold></u-text>
			<!-- <view class="birthday-box" @click="show = true">
				<u-text color="#999" :text="birthday" size="32rpx"></u-text>
			</view>
			<u-calendar color="#FFB74D" :show="show" @confirm="handleBirthday"></u-calendar> -->
			<view class="birthday-box">
				<up-datetime-picker hasInput :show="show" v-model="birthday" mode="date"
					confirmColor="#FFB74D"></up-datetime-picker>
			</view>

		</view>
		<view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
			<u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';

const { themePrimary, themeSecondary, themeTertiary } = useTheme();

const birthday = ref('2025-01-01')
const show = ref(false)

const handleBirthday = (e) => {
	console.log(e)
	show.value = false
	birthday.value = e[0]
}
</script>
<style scoped lang="scss">
.birthday-box {
	background: #F7F7F7;
	padding: 30rpx;
	margin-top: 20rpx;
}

.camera-icon {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 54rpx;
	height: 54rpx;
}
</style>